<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        body{
            background-color: #ccc;
        }
        #app{
            width: 400px;
            margin: 20px auto;
            background-color: #fff;
            border:4px solid blueviolet;
            border-radius: 1em;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
            padding:1em 2em 2em;
        }
        h3{
            text-align: center;
        }
        .box {
            padding:1em;
            border:1px solid #ccc;

        }
        
    </style>
</head>
<body>
    <div id="app">
        <h3>v-for 循环遍历不同的数据</h3>
        <div class="box">
            <h5>1. 简单数组</h5>
            <p v-for="it in aihao">{{it}}</p>
        </div>
        <div class="box">
            <h5>2. 复杂数组-数组中的成员是对象</h5>
            <span v-for="it in list">名字:{{it.name}}</span>
        </div>

        <div class="box">
            <h5>3. 要对对象进行遍历 - 用的少</h5>
            <!-- 遍历出每一个属性 -->
            <!-- <span v-for="(属性值，属性名) in info">{{it}}</span> -->
            <span v-for="(value,prop) in info"> {{prop}} : {{value}}</span>
        </div>

        <div class="box">
            <h5>4. 要对数值进行遍历 - 用的少</h5>
            <span v-for="item in 10">{{item}}</span>
        </div>
    </div>
    <script>
        // <元素 v-for="(遍历变量，索引变量) in 可遍历的数据项" :key="唯一的id"></元素>
        // 可遍历的数据项可能是：
        // 1. 数组 （掌握）
        // 2. 对象 （了解）
        // 3. 数值 （了解）
        const vm = new Vue({
            el: "#app",
            data: {
                aihao: ['唱歌', '多人运动', '时间管理'],
                list: [
                    {name:'小张',gender:'男'},
                    {name:'小美',gender:'女'}
                ],
                info: {name: '小明', age: 18, height:'180cm'},
            }
            
        })
       
    </script>

</body>
</html>